<template>
  <el-scrollbar always class="h-full w-full overflow-hidden">
    <section v-loading="state.loading">
      <article
        class="text-[13px]"
        :class="{
          active: state.active == i
        }"
        v-for="(item, i) in games"
        @click="handleClick(item, i)"
      >
        <span>{{ item.Name }}</span>
        <el-icon class="!mt-[2px]"><ArrowRight /></el-icon>
      </article>
    </section>
  </el-scrollbar>
</template>
<script setup lang="ts">
import { useGameStore } from "@/store/modules/game";
import { cloneDeep } from "lodash-es";
import { storeToRefs } from "pinia";

interface State {
  loading: boolean;
  active: number;
}

const gameStore = useGameStore();
const { gameTotal } = storeToRefs(gameStore);
const games = computed(() => {
  let list = cloneDeep(gameTotal.value);
  list.sort((a, b) => a.LotterySort - b.LotterySort);
  return list;
});
const emit = defineEmits(["init", "change"]);
const state = reactive<State>({
  loading: false,
  active: 0
});

const handleClick = (item: any, i: number) => {
  state.active = i;
  emit("change", item);
};
const getGameItem = () => {
  return games.value[state.active];
};
onMounted(() => {
  emit("init", games.value[state.active]);
});
defineExpose({
  getGameItem
});
</script>
<style scoped>
section {
  @apply mx-[8px] mt-[20px];
}
article {
  @apply h-[32px] flex items-center justify-center mb-[15px] rounded-full;
  @apply cursor-pointer text-[14px] text-[#888];
  box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.1);
}
article.active {
  @apply text-[#fff];
  background-image: linear-gradient(to right, #0a5fbe, #08b9c2);
  box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.2);
}
</style>
